<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布资源 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .form-input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl font-bold">1024<span class="text-secondary">导航</span></div>
                <span class="hidden md:inline-block text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">v2.3</span>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="resources.html" class="text-primary font-medium">资源</a>
                <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区</a>
                <a href="about.html" class="text-gray-600 hover:text-primary transition-colors">关于</a>
            </nav>

            <div class="flex items-center space-x-3">
                <div class="relative group">
                    <button
                        class="flex items-center space-x-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                        <img src="https://picsum.photos/id/1005/30/30" alt="用户头像" class="w-7 h-7 rounded-full">
                        <span class="hidden md:inline-block text-sm">张小明</span>
                        <i class="fa fa-angle-down text-xs"></i>
                    </button>
                </div>
                <button class="md:hidden text-gray-600 text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="py-10 bg-gradient-to-b from-white to-gray-50 border-b border-gray-100">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto">
                <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-gradient">发布新资源</h1>
                <p class="text-gray-600">分享优质资源，帮助更多人高效获取信息</p>
            </div>
        </div>
    </section>

    <!-- 发布表单区 -->
    <section class="py-10">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto">
                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                    <div class="flex items-center mb-6">
                        <div
                            class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-info"></i>
                        </div>
                        <p class="text-gray-600 text-sm">请填写资源信息，所有带 <span class="text-red-500">*</span> 的为必填项</p>
                    </div>

                    <form class="space-y-6">
                        <!-- 资源标题 -->
                        <div>
                            <label for="resourceTitle" class="block text-sm font-medium text-gray-700 mb-1">
                                资源标题 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="resourceTitle" placeholder="请输入资源的名称"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-md form-input-focus">
                            <p class="mt-1 text-xs text-gray-500">请使用简洁明了的标题，准确描述资源内容</p>
                        </div>

                        <!-- 资源链接 -->
                        <div>
                            <label for="resourceUrl" class="block text-sm font-medium text-gray-700 mb-1">
                                资源链接 <span class="text-red-500">*</span>
                            </label>
                            <input type="url" id="resourceUrl" placeholder="https://"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-md form-input-focus">
                            <p class="mt-1 text-xs text-gray-500">请输入有效的资源链接地址</p>
                        </div>

                        <!-- 资源分类 -->
                        <div>
                            <label for="resourceCategory" class="block text-sm font-medium text-gray-700 mb-1">
                                资源分类 <span class="text-red-500">*</span>
                            </label>
                            <select id="resourceCategory"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-md form-input-focus">
                                <option value="">请选择分类</option>
                                <option value="development">开发工具</option>
                                <option value="design">设计资源</option>
                                <option value="education">学习教育</option>
                                <option value="entertainment">影音娱乐</option>
                                <option value="shopping">电商购物</option>
                                <option value="tools">实用工具</option>
                                <option value="images">图片素材</option>
                            </select>
                        </div>

                        <!-- 资源标签 -->
                        <div>
                            <label for="resourceTags" class="block text-sm font-medium text-gray-700 mb-1">
                                资源标签
                            </label>
                            <input type="text" id="resourceTags" placeholder="请输入标签，多个标签用逗号分隔"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-md form-input-focus">
                            <p class="mt-1 text-xs text-gray-500">最多可添加5个标签，有助于资源的分类和搜索</p>
                        </div>

                        <!-- 资源描述 -->
                        <div>
                            <label for="resourceDescription" class="block text-sm font-medium text-gray-700 mb-1">
                                资源描述 <span class="text-red-500">*</span>
                            </label>
                            <textarea id="resourceDescription" rows="5" placeholder="请详细描述该资源的特点、功能和使用场景"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-md form-input-focus"></textarea>
                            <p class="mt-1 text-xs text-gray-500">请提供有价值的描述，帮助其他用户了解资源的用途和优势（至少20个字）</p>
                        </div>

                        <!-- 资源Logo上传 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                资源Logo
                            </label>
                            <div class="flex items-center justify-center w-full">
                                <label for="logoUpload"
                                    class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <i class="fa fa-cloud-upload text-gray-400 text-2xl mb-2"></i>
                                        <p class="mb-1 text-sm text-gray-600"><span class="font-semibold">点击上传</span>
                                            或拖放文件</p>
                                        <p class="text-xs text-gray-500">支持 PNG, JPG 格式，建议尺寸 200x200px</p>
                                    </div>
                                    <input id="logoUpload" type="file" class="hidden" accept="image/*" />
                                </label>
                            </div>
                        </div>

                        <!-- 资源类型 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">
                                资源类型
                            </label>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                <label
                                    class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="resourceType" value="website" class="mr-2 text-primary">
                                    <span>网站</span>
                                </label>
                                <label
                                    class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="resourceType" value="tool" class="mr-2 text-primary">
                                    <span>在线工具</span>
                                </label>
                                <label
                                    class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="resourceType" value="document" class="mr-2 text-primary">
                                    <span>文档资料</span>
                                </label>
                            </div>
                        </div>

                        <!-- 收费类型 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">
                                收费类型
                            </label>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                <label
                                    class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="pricingType" value="free" class="mr-2 text-primary"
                                        checked>
                                    <span>完全免费</span>
                                </label>
                                <label
                                    class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="pricingType" value="freemium" class="mr-2 text-primary">
                                    <span>免费+付费功能</span>
                                </label>
                                <label
                                    class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="pricingType" value="paid" class="mr-2 text-primary">
                                    <span>完全付费</span>
                                </label>
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="pt-4 border-t border-gray-100 flex flex-col sm:flex-row gap-3">
                            <button type="submit"
                                class="flex-1 px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors font-medium">
                                <i class="fa fa-paper-plane mr-2"></i> 提交资源
                            </button>
                            <button type="button"
                                class="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors font-medium">
                                保存草稿
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 提交须知 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-bold mb-4">资源提交须知</h3>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>提交的资源必须是合法合规的，不得包含违法、色情、暴力等不良内容</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>资源需具有一定的实用性和价值，重复或低质量的资源将不予通过</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>提交后我们将在24-48小时内进行审核，审核结果将通过消息通知您</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>优质资源的贡献者将获得平台积分奖励，积分可用于兑换特权</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>如发现恶意提交或违规内容，将封禁账号并取消所有贡献</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10 mt-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">最新收录</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门推荐</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">关于我们</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">网站介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-500">
                <p>© 2023 1024导航 - 优质资源聚合平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        // 简单的表单验证
        document.querySelector('form').addEventListener('submit', function (e) {
            e.preventDefault();

            const title = document.getElementById('resourceTitle').value.trim();
            const url = document.getElementById('resourceUrl').value.trim();
            const category = document.getElementById('resourceCategory').value;
            const description = document.getElementById('resourceDescription').value.trim();

            if (!title) {
                alert('请输入资源标题');
                return;
            }

            if (!url) {
                alert('请输入资源链接');
                return;
            }

            if (!category) {
                alert('请选择资源分类');
                return;
            }

            if (description.length < 20) {
                alert('资源描述请至少输入20个字');
                return;
            }

            // 模拟提交成功
            alert('资源提交成功，我们将尽快审核！');
            this.reset();
        });
    </script>
</body>

</html>